<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的作品</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/my-work.css">
</head>
<body>
<div class="nav">
    <img src="img/head1.jpg" alt="">
    <span>My Space</span>
    <!-- 空白元素 实现占位 -->
    <div class="spacer"></div>
    <a href="index.html">主页</a>
    <a href="#">我的作品</a>
    <a href="blog_list.html">博客</a>
    <a href="aboutme.html">生活碎片</a>
    <a href="logout">退出</a>
</div>
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="left">
        <!-- 表示整个用户的信息区域 -->
        <div class="card">
            <img src="img/head.jpg" alt="">
            <!--            用户名-->
            <h3></h3>
            <a href="https://github.com/lt152" target="_blank">github地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>4</span>
                <span>1</span>
            </div>
            <div style="margin-top: 20px">
                <p style="font-size: small">透过黑暗，看到光明。</p>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div class="middle" style="width: 980px">
        <!--<span >454545</span>-->

        <div class="works">
            <div class="w1">
                <img src="img/01.png" alt="作品1">
                <div><p>综合利用计算机图形学知识设计一款钟表，并加入贴图，表针动画，视角缩放等功能。</p><br>
                    <p>
                        本作品包括四个模块，分别是场景构建、材质贴图、键盘响应事件和实时渲染模块。OpenGL程序初始化后，先进行场景构建，搭建出钟表的基本外形轮廓和底座，对材质的贴图也在同时进行；随后启动实时渲染模块，调用glutTimerFunc间隔固定的时间对视图进行重绘。与此同时使用键盘事件监听，可以用按键控制视角的移动与缩放。
                    </p></div>
            </div>
            <div class="w2">
                <div><p>本程序为 JavaWeb 综 合 系 统 ， 适 用 于 学 生 成 绩 管 理 ， 基 于
                    servlet+jsp+javabean 完成，分为前端与后端两个部分。界面部分包括登录界面、
                    管理员、普通用户以及不同用户对应的功能界面。
                </p>
                    <br>
                    <p>
                        系统基于 mvc 模式，界面为 jsp 的 web 页面，jsp 作为视图，servlet 作为控
                        制器 controller，javabean 作为模型来承载数据。数据库为云端服务器数据库，
                        界面通过 http 请求与数据库进行交互，传输数据。
                    </p></div>
                <img src="img/02.png" alt="作品1">

            </div>

            <div class="w1">
                <img src="img/04.png" alt="作品1">
                <div><p>
                    数字图像处理项目：选用人脸识别模块，旨在充分运用数字图像处理课程相关知识、熟练掌握VC++的使用技能，并通过小组合作在mfc中完成一个实现人脸识别的功能的程序。该程序通过读取包含人脸的图像，点击对应功能的按钮，可以实现对图像中人脸的识别，将人脸框选出来。</p>
                    <br>
                </div>
            </div>
        </div>

    </div>
    <div class="right" style="display: none">

    </div>
</div>
</body>
</html>
<style>
    .w1 {
        display: flex;
    }

    .w2 {
        display: flex;
    }

    .works img {
        width: 450px;
        height: 330px;
        margin: 20px;
    }

    .works div {
        /*float: left;*/
        margin: 20px;
        /*text-indent: 2em;*/
    }

    .works p {
        text-indent: 2em;
    }
</style>
<script>
    //通过 get /login 这个接口来获取当前的登录状态
    function getUserInfo() {
        $.ajax({
            type: 'get',
            url: 'login',
            success: function (body) {
                //判定此处的body是不是一个有效的user对象
                if (body.userId && body.userId > 0) {
                    //登录成功，不做处理
                    console.log("当前用户登录成功，用户名：" + body.username);
                    changeUserName(body.username);
                } else {
                    //登录失败，让前端页面跳转到login.html
                    alert("当前您尚未登录！请登录后再访问！");
                    location.assign('login.html');
                }
            },
            error: function () {
                alert('当前您尚未登录！请登录后再访问此页面！');
                location.assign('login.html');
            }
        });
    }


    function changeUserName(username) {
        let h3 = document.querySelector('.card>h3');
        h3.innerHTML = username;
    }

    getUserInfo();
</script>